import React, { PureComponent, Fragment } from 'react';
import moment from 'moment';
import { connect } from 'dva';
import NoData from '../InfoWarn/component/NoData'; // 无数据时展示的组件
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Row, Col, Spin, Modal, message } from 'antd';
import style from './index.less';
import XXXX from '../../../../assets/busi/OperatePlatform/card_border_left.png';
import mapImg from '../../../../assets/busi/OperatePlatform/position.png';
class CurrentMeeting extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      data: [], // 今日会议数据
      bodyHeight: '',
    };
  }

  componentDidMount() {
    const { dispatch } = this.props;
    const userId = localStorage.getItem('antd-pro-userId');
    this.resize();
    window.addEventListener('resize', this.resize);
    // dispatch({
    // 	type: 'OperatePlatformM/getMessage',
    // 	payload: {
    // 		userId
    // 	},
    // 	callback: (res) => {
    // 		if (res) {
    // 			this.setState({
    // 				data: res
    // 			})
    // 		}
    // 	}
    // })
  }
  UNSAFE_componentWillReceiveProps() {
    this.resize();
  }
  resize = () => {
    const showHeader = this.props.OperatePlatformM.orgId;
    let heightVal = document.body.clientHeight - 555;
    if (showHeader) {
      heightVal = document.body.clientHeight - 605;
    }
    if (heightVal > 0) {
      this.setState({
        bodyHeight: heightVal,
      });
    } else {
      this.setState({
        bodyHeight: 332,
      });
    }
  };

  // 根据数据渲染后的展示组件
  showComponent = () => {
    let { data } = this.state;
    if (data && data.length && data.length > 10) {
      data = data.slice(0, 10);
    }
    return (
      <div className='totalCommon' style={{ height: this.state.bodyHeight + 'px', minHeight: '332px', padding: '0px 20px', paddingBottom: '20px' }}>
        {data.length ? (
          data.map((item) => {
            return <>{this.oneComponent(item)}</>;
          })
        ) : (
          <div style={{ height: '100%', display: 'flex', minHeight: '332px', alignItems: 'center' }}>
            <NoData title='敬请期待' width='104px' />
          </div>
        )}
      </div>
    );
  };

  // 单个模块组件
  oneComponent = (data) => {
    return (
      <div className='oneCom'>
        <div className='timeArea'>
          <span className='time_1'>{data.beginTime ? moment(data.beginTime).format('HH:mm') : ''}</span>
          <span className='time_2'>{data.endTime ? moment(data.endTime).format('HH:mm') : ''}</span>
        </div>
        <div className='oneBody'>
          <div className='img_body'>
            <img src={XXXX} style={{ height: '83px', width: '4px' }} />
          </div>

          <Row type='flex' justify='space-between'>
            <div className='body_title'>
              <span title={data?.invstresInfo?.title}>{data?.invstresInfo?.title}</span>
            </div>
          </Row>

          <div className='body_comp'>
            <Row type='flex' justify='space-between'>
              {data.address ? (
                <Col span={17} style={{ height: '20px', display: 'flex', alignItems: 'center' }}>
                  <div className='adress_S'>
                    <img src={mapImg} style={{ height: '14px', width: '12px' }} />
                    &nbsp;&nbsp;
                    <span title={data.address ? data.address : ''}>{data.address ? data.address : ''}</span>
                  </div>
                </Col>
              ) : null}
              <Col span={6}>
                <div className='body_name'>
                  <span title={data.guest}>{data.guest}</span>
                </div>
              </Col>
            </Row>
          </div>
        </div>
      </div>
    );
  };

  render() {
    const loading = false;
    return (
      <div style={{ paddingTop: '18px', backgroundColor: 'white' }} className={style.body}>
        <div className='main_title'>
          <span style={{ paddingLeft: '20px' }}>今日会议</span>
        </div>
        <Spin spinning={loading}>
          <div className='mainBody'>{this.showComponent()}</div>
        </Spin>
      </div>
    );
  }
}
export default connect(({ OperatePlatformM, loading }) => ({ OperatePlatformM, loading: loading.effects['OperatePlatformM/getMessage'] }))(CurrentMeeting);
